{% extends "layout.html" %}

{% block head %}
  {% endblock %}

{% block right %}

<style>
    .expain{
        height: 600px;
    }

</style>




<div class="layui-fluid" >
<div class="layui-row layui-col-space15" >
        <div class="layui-col-md12">
            <div class="layui-card">

                <div class="expain">
                    <br>
                    <div class="layui-col-md7" >
                        <blockquote class="layui-elem-quote">
                         控制台说明：<br>

                           后台功能：
                            <br>
                         &nbsp;&nbsp; &nbsp;&nbsp; 1. 点击左侧图标可以展开和收缩左侧导航栏
                            <br>
                         &nbsp;&nbsp; &nbsp;&nbsp; 2. 数据管理界面可以对爬虫进行可视化操作，自定义爬虫URL、定义一系列爬虫的参数等
                     </blockquote>
                        <blockquote class="layui-elem-quote">
                        用户管理说明：<br>
                            <br>
                       &nbsp;&nbsp;&nbsp;&nbsp; 用户管理界面可以通过账号ID搜索用户。
                        </blockquote>
                         <blockquote class="layui-elem-quote">
                        管理权限说明：<br>
                             <br>
                            &nbsp;&nbsp; &nbsp;&nbsp;1.超级管理员：控制台可以进行用户管理，对账号的状态进行操作，冻结用户与启用用户，禁止冻结自身的账号。<br>
                        &nbsp;&nbsp;   &nbsp;&nbsp;  &nbsp;&nbsp;可以查看管理员列表与普通用户列表并且进行交互操作，可以对用户的权限进行操作，只能修改自身权限之下的等级进行操作<br>
                             <br>
          &nbsp;&nbsp;&nbsp;&nbsp;2.普通管理员：只能对其他用普通户进行冻结后开启，与查看控制台
                        </blockquote>




                    </div>
                    <div class="layui-col-md5" id="chart" style="height: 600px">
                    </div>
                     <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">系统信息</div>
                        <div class="layui-card-body ">
                            <table class="layui-table">
                                <tbody>
                                    <tr>
                                        <th>正式本</th>
                                        <td>1.0.180420</td></tr>
                                    <tr>
                                        <th>服务器地址</th>
                                        <td>cjone.natapp1.cc</td></tr>
                                    <tr>
                                        <th>操作系统</th>
                                        <td>Linux Centos-7</td></tr>
                                    <tr>
                                        <th>运行环境</th>
                                        <td>Apache/Python3/Hadoop-2.7.3/JDK1.8/</td></tr>
                                    <tr>
                                        <th>python版本</th>
                                        <td>3.8</td></tr>
                                    <tr>
                                    <tr>
                                        <th>JDK版本</th>
                                        <td>1.8</td></tr>
                                    <tr>
                                        <th>MYSQL版本</th>
                                        <td>8.5.53</td></tr>
                                    <tr>
                                        <th>Spark版本</th>
                                        <td>2.3.1</td></tr>
                                    <tr>
                                        <th>scala</th>
                                        <td>2.11</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>





                </div>

            </div>
</div>
</div>
</div>
<script src="../../static/js/echarts.js"></script>
<script>
    chart = echarts.init(document.getElementById('chart'));
    var option = {
        title: {
            text: ''
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 20
                },
            }
        },
        series: [

            {
                type: 'graph',
                layout: 'force',
                symbolSize: 80,
                focusNodeAdjacency: true,
                roam: true,
                categories: [{
                    name: '管理员',
                    itemStyle: {
                        normal: {
                            color: "#009800",
                        }
                    }
                }, {
                    name: '普通管理员',
                    itemStyle: {
                        normal: {
                            color: "#4592FF",
                        }
                    }
                }, {
                    name: '用户',
                    itemStyle: {
                        normal: {
                            color: "#3592F",
                        }
                    }
                }],
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 12
                        },
                    }
                },
                force: {
                    repulsion: 1000
                },
                edgeSymbolSize: [4, 50],
                edgeLabel: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 10
                        },
                        formatter: "{c}"
                    }
                },
                data: [{
                    name: '管理员',
                    draggable: true,
                }, {
                    name: '开启用户',
                    category: 1,
                    draggable: true,
                }, {
                    name: '冻结用户',
                    category: 1,
                    draggable: true,
                }, {
                    name: '数据管理',
                    category: 1,
                    draggable: true,
                },],
                links: [{
                    source: 0,
                    target: 1,
                    category: 0,
                    value: ' '
                }, {
                    source: 0,
                    target: 2,
                    value: ' '
                }, {
                    source: 0,
                    target: 3,
                    value: ' '
                }],
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 1,
                        legend: 30,
                        curveness: 0
                    }
                }
            }
        ]
    };
    chart.setOption(option)
</script>

{% endblock %}

    {% block footer%}
    {% endblock %}